<template>
  <div class="ddregCContainer">
    <div class="ddregC_top">{{ i18nt.demand.title }}</div>
    <input_b class="ddregCInput1" ref="input1" />
    <div class="ddregC_towInput">
      <div class="ddregCInput2C">
        <input_b class="ddregCInput2" :title="i18nt.demand.str5" ref="input2" />
      </div>
      <input_c class="ddregCInput3" ref="input3" />
    </div>
    <btn_b :title="i18nt.demand.str7" :func="dosoming" class="ddregCSubmit" />
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import input_b from "@/components/inputs/input_b.vue";
import input_c from "@/components/inputs/input_c.vue";
import btn_b from "@/components/buttons/btn_b.vue";
import { msgbox } from "@/utils/msgboxutils";

const input1 = ref<InstanceType<typeof input_b> | null>(null);
const input2 = ref<InstanceType<typeof input_b> | null>(null);
const input3 = ref<InstanceType<typeof input_c> | null>(null);

const dosoming = () => {
  let str1 = input1.value?.inputRef?.inputValue;
  let str2 = input2.value?.inputRef?.inputValue;
  let str3 = input3.value?.inputValue;

  msgbox.success(
    `输入的标题： ${str1}  ;\n  输入的分类： ${str2}  ;\n  输入input3： ${str3} ;`
  );
};
</script>

<style scoped lang="scss">
.ddregCContainer {
  @include relative_hw(100%, 100%);
  flex-direction: column;
  .ddregC_top {
    font-family: "Songti SC", "Songti SC";
    font-weight: 900;
    font-size: 24px;
    text-align: left;
    color: #ffffff;
    margin-top: 36px;
  }

  .ddregCInput1 {
    margin-top: 55px;
  }

  .ddregC_towInput {
    @include relative_hw(50px, 100%);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    margin-top: 53px;
    .ddregCInput2C {
      @include relative_hw(100%, 278px);
      //   align-items: center;
      .ddregCInput2 {
        :deep(.input_bI) {
          width: 210px;
        }
      }
    }

    .ddregCInput3 {
      width: 406px;
    }
  }

  .ddregCSubmit {
    width: 218px;
    height: 50px;
    margin-top: 53px;
    margin-left: 63.41px;
  }
}
</style>
